<template>
  <div class="dashboard-container">
    <!-- 第一行：生产情况 -->
    <div class="content-row">
      <!-- 左侧面板 -->
      <div class="left-panel panel-box">
        <div class="panel-title">生产情况</div>
        <div class="data-grid">
          <div class="data-item">
            <div class="data-value">{{productionData.yearProduction}}<span class="unit">吨</span></div>
            <div class="data-label">年度产生总量</div>
          </div>
          <div class="data-item">
            <div class="data-value">{{productionData.facilityCount}}<span class="unit">个</span></div>
            <div class="data-label">产生源/生产设施</div>
          </div>
          <div class="data-item">
            <div class="data-value">{{productionData.yearPlan}}<span class="unit">吨</span></div>
            <div class="data-label">年度计划量</div>
          </div>
          <div class="data-item">
            <div class="data-value">{{productionData.hazardousCount}}<span class="unit">个</span></div>
            <div class="data-label">危废种类</div>
          </div>
        </div>
        
        <!-- 生产进度 -->
        <div class="progress-section">
          <div class="progress-title">生产进度</div>
          <div class="progress-chart" ref="progressChart"></div>
        </div>
        
        <!-- 生产类别饼图 -->
        <div class="category-section">
          <div class="category-title">生产类别</div>
          <div class="pie-chart" ref="categoryChart"></div>
          <div class="category-legend">
            <div class="legend-item" v-for="(item, index) in categoryData" :key="index">
              <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
              <span class="legend-name">{{item.name}}</span>
              <span class="legend-value">{{item.value}}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间面板：年度数据 -->
      <div class="middle-panel panel-box">
        <div v-for="(year, index) in yearData" :key="index" class="year-card">
          <div class="year-header">{{year.year}}</div>
          <div class="year-content">
            <div class="year-item">
              <div class="item-label">产生</div>
              <div class="item-value">{{year.production}}</div>
            </div>
            <div class="year-item">
              <div class="item-label">总处置</div>
              <div class="item-value">{{year.totalDisposal}}</div>
            </div>
            <div class="year-item">
              <div class="item-label">综合利用</div>
              <div class="item-value">{{year.comprehensiveUsage}}</div>
            </div>
            <div class="year-item">
              <div class="item-label">产生强度</div>
              <div class="item-value">{{year.productionIntensity}}</div>
            </div>
            <div class="year-item">
              <div class="item-label">综合利用率</div>
              <div class="item-value">{{year.usageRate}}%</div>
            </div>
          </div>
          <div class="year-chart" :ref="'yearChart' + index"></div>
        </div>
      </div>

      <!-- 右侧面板：委外利用和自行利用 -->
      <div class="right-panel panel-box">
        <div class="usage-section">
          <div class="usage-title">委外利用</div>
          <div class="usage-data">
            <div class="usage-amount">{{outsourceData.amount}}<span class="unit">吨</span></div>
            <div class="usage-plan">计划量：{{outsourceData.plan}}<span class="unit">吨</span></div>
          </div>
        </div>
        <div class="usage-section">
          <div class="usage-title">自行利用</div>
          <div class="usage-data">
            <div class="usage-amount">{{selfUseData.amount}}<span class="unit">吨</span></div>
            <div class="usage-plan">计划量：{{selfUseData.plan}}<span class="unit">吨</span></div>
          </div>
        </div>
        <div class="evaluation-section">
          <div class="evaluation-title">规范化评估</div>
          <div class="radar-chart" ref="radarChart"></div>
          <div class="evaluation-legend">
            <div class="legend-item" v-for="(item, index) in evaluationData" :key="index">
              <span class="legend-name">{{item.name}}</span>
              <span class="legend-value">{{item.value}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行：配存情况 -->
    <div class="storage-section panel-box">
      <div class="storage-header">
        <div class="storage-title">配存情况</div>
        <div class="storage-info">
          <div class="info-item">
            <span class="info-value">{{storageData.amount}}</span>
            <span class="info-label">配存总量</span>
          </div>
          <div class="info-item">
            <span class="info-value">{{storageData.facilities}}</span>
            <span class="info-label">配存设施</span>
          </div>
        </div>
      </div>
      <div class="storage-table">
        <el-table :data="storageData.list" style="width: 100%" :header-cell-style="tableHeaderStyle">
          <el-table-column prop="index" label="" width="50"></el-table-column>
          <el-table-column prop="name" label="危废名称"></el-table-column>
          <el-table-column prop="amount" label="配存量(吨)"></el-table-column>
          <el-table-column prop="percentage" label="占比">
            <template slot-scope="scope">
              <div class="percentage-bar">
                <div class="percentage-fill" :style="{ width: scope.row.percentage + '%' }"></div>
                <span>{{scope.row.percentage}}%</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ProductionDashboard',
  data() {
    return {
      productionData: {
        yearProduction: '1433.81',
        facilityCount: '127',
        yearPlan: '21499.69',
        hazardousCount: '18'
      },
      categoryData: [
        { name: '污泥', value: '895', color: '#49E49F' },
        { name: '废盐', value: '145852', color: '#B2FC7C' },
        { name: '蒸馏残渣', value: '52585', color: '#8898FF' },
        { name: '焚烧飞灰', value: '586321', color: '#FFE58F' },
        { name: '精馏残渣', value: '586321', color: '#FF9F7F' }
      ],
      yearData: [
        {
          year: '2023',
          production: '7,457.23',
          totalDisposal: '6,215.1585',
          comprehensiveUsage: '2,253.057',
          productionIntensity: '2,253.057',
          usageRate: '36.2'
        },
        {
          year: '2024',
          production: '7,457.23',
          totalDisposal: '6,215.1585',
          comprehensiveUsage: '2,253.057',
          productionIntensity: '2,253.057',
          usageRate: '36.2'
        },
        {
          year: '2025',
          production: '7,457.23',
          totalDisposal: '6,215.1585',
          comprehensiveUsage: '2,253.057',
          productionIntensity: '2,253.057',
          usageRate: '36.2'
        }
      ],
      outsourceData: {
        amount: '1148.28',
        plan: '15686.77'
      },
      selfUseData: {
        amount: '1148.28',
        plan: '15686.77'
      },
      evaluationData: [
        { name: '有组织转移', value: '9944' },
        { name: '无组织转移', value: '96' },
        { name: '清洁运输', value: '68' },
        { name: '处置设施运行', value: '36' },
        { name: '环境合规', value: '14' },
        { name: '环保制度', value: '5' }
      ],
      storageData: {
        amount: '127',
        facilities: '127',
        list: [
          { name: '污泥 (772-006-49)', amount: '25.86', percentage: '30.16' },
          { name: '废盐 (900-000-49)', amount: '24.53', percentage: '28.62' },
          { name: '蒸馏残渣 (900-013-11)', amount: '12.73', percentage: '14.85' },
          { name: '焚烧飞灰 (772-003-18)', amount: '6.53', percentage: '7.62' },
          { name: '精馏残渣 (900-013-11)', amount: '4.45', percentage: '5.19' }
        ]
      },
      tableHeaderStyle: {
        background: '#F5F7FA',
        color: '#606266',
        fontWeight: 'bold'
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initProgressChart()
      this.initCategoryChart()
      this.initYearCharts()
      this.initRadarChart()
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.charts.forEach(chart => {
        chart && chart.resize()
      })
    },
    initProgressChart() {
      const chart = echarts.init(this.$refs.progressChart)
      const option = {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#464646',
            fontSize: 20,
            distance: -60,
            formatter: function(value) {
              if (value === 0 || value === 100) {
                return value + '%';
              }
              return '';
            }
          },
          title: {
            offsetCenter: [0, '-20%'],
            fontSize: 30
          },
          detail: {
            fontSize: 50,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: function(value) {
              return Math.round(value * 100) / 100 + '%';
            },
            color: 'auto'
          },
          data: [{
            value: 16.6,
            name: '生产进度'
          }]
        }]
      }
      chart.setOption(option)
      this.charts = this.charts || []
      this.charts.push(chart)
    },
    initCategoryChart() {
      const chart = echarts.init(this.$refs.categoryChart)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.categoryData.map(item => ({
            value: item.value,
            name: item.name,
            itemStyle: {
              color: item.color
            }
          }))
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    },
    initYearCharts() {
      this.yearData.forEach((year, index) => {
        const chart = echarts.init(this.$refs[`yearChart${index}`][0])
        const option = {
          grid: {
            top: 10,
            bottom: 0,
            left: 0,
            right: 0
          },
          xAxis: {
            type: 'category',
            show: false
          },
          yAxis: {
            type: 'value',
            show: false
          },
          series: [{
            data: [30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60],
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(58, 77, 233, 0.8)'
              }, {
                offset: 1,
                color: 'rgba(58, 77, 233, 0.1)'
              }])
            },
            lineStyle: {
              color: '#3A4DE9'
            }
          }]
        }
        chart.setOption(option)
        this.charts.push(chart)
      })
    },
    initRadarChart() {
      const chart = echarts.init(this.$refs.radarChart)
      const option = {
        radar: {
          indicator: this.evaluationData.map(item => ({
            name: item.name,
            max: 100
          })),
          splitNumber: 4,
          axisLine: {
            lineStyle: {
              color: '#E3E6EC'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#E3E6EC'
            }
          },
          splitArea: {
            show: false
          }
        },
        series: [{
          type: 'radar',
          data: [{
            value: this.evaluationData.map(item => parseFloat(item.value)),
            itemStyle: {
              color: '#3A4DE9'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(58, 77, 233, 0.8)'
              }, {
                offset: 1,
                color: 'rgba(58, 77, 233, 0.1)'
              }])
            }
          }]
        }]
      }
      chart.setOption(option)
      this.charts.push(chart)
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #F5F7FA;
}

.content-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.panel-box {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.left-panel {
  flex: 2;
}

.middle-panel {
  flex: 3;
}

.right-panel {
  flex: 2;
}

.panel-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.data-item {
  text-align: center;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.unit {
  font-size: 14px;
  color: #909399;
  margin-left: 4px;
}

.data-label {
  font-size: 14px;
  color: #606266;
  margin-top: 8px;
}

.progress-chart {
  height: 300px;
  margin-bottom: 30px;
}

.category-chart {
  height: 300px;
}

.year-card {
  background: #F5F7FA;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.year-header {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.year-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

.year-item {
  text-align: center;
}

.item-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.item-value {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.year-chart {
  height: 60px;
}

.usage-section {
  margin-bottom: 30px;
}

.usage-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.usage-data {
  text-align: center;
}

.usage-amount {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.usage-plan {
  font-size: 14px;
  color: #606266;
  margin-top: 8px;
}

.radar-chart {
  height: 300px;
}

.evaluation-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #606266;
}

.legend-color {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.storage-section {
  margin-top: 20px;
}

.storage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.storage-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.storage-info {
  display: flex;
  gap: 30px;
}

.info-item {
  text-align: center;
}

.info-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-right: 8px;
}

.info-label {
  font-size: 14px;
  color: #606266;
}

.percentage-bar {
  width: 100%;
  height: 20px;
  background: #F5F7FA;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.percentage-fill {
  height: 100%;
  background: #3A4DE9;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.percentage-bar span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #FFFFFF;
  font-size: 12px;
}

.category-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
}
</style> 